import { useState } from 'react'
import '../assets/css/Login.css'
import { Button, Input, Divider, Modal } from 'antd'
import { getLogin } from '../api/User/userApi'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { setUser } from '../stores/userSlice'

export default function Login() {
  const [UserName, setUserName] = useState('sunpeng')
  const [Password, setPassWord] = useState('666')
  const [isRead, setIsRead] = useState(false)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const handleLogin = async () => {
    if (isRead) {
      const res = await getLogin({account:UserName,password:Password})
      console.log(res);
      if(res.code === 1){
        dispatch(setUser(res))
        navigate('/')
      }
    } else {
      setIsModalOpen(true);
    }
  }

  const handleOk = () => {
    setIsRead(true)
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <>
      <div className="bac_img">
        <div className="login_box">
          <div className="title">
            <h1>东软医院HIS信息管理平台</h1>
          </div>
          <div className="main">
            <Input className="input" value={UserName} onChange={(e) => setUserName(e.target.value)} placeholder='请输入您的用户名/邮箱' />
            <Input.Password  className="input" value={Password} onChange={(e) => setPassWord(e.target.value)} type="" placeholder='请输入您的密码' />
            <Button onClick={handleLogin} style={{ background: UserName && Password ? '' : '#9fceff' }} type='primary'>下一步</Button>
            <p className='readme'><input type="checkbox" name="" id="isRead" checked={isRead} onChange={(e) => setIsRead(!!e.target.checked)} /> 我已阅读并同意 <a href=""> 服务协议 </a> 和 <a href=""> 隐私政策 </a></p>
          </div>
          <div className="footer">
            <Divider plain>版权所有</Divider>
          </div>
        </div>
        <Modal title="" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText="确认"
          cancelText="取消">
          <p>请阅读并同意<a href=""> 服务协议 </a> 和 <a href=""> 隐私政策 </a></p>
        </Modal>
      </div>
    </>
  )
}
